<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/d3.js"></script>
	<script type="text/javascript" src="../js/dimple.v2.1.0.js"></script>
	<script src="../js/pace/pace.js"></script>
	<script src="../js/dojo-release-1.9.3/dojo/dojo.js"></script>
	<link rel="stylesheet" href="../js/dojo-release-1.9.3/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../js/dojo-release-1.9.3/dijit/themes/claro/claro.css">
	<link rel="stylesheet" href="../js/dojo-release-1.9.3/dojox/grid/resources/claroGrid.css">
	<link href="../js/pace/themes/loadingBar.css" rel="stylesheet" />
	
	<style type="text/css">
       body {
           text-align: center;
           font: 10px sans-serif;
       }
       svg {
           font: 10px sans-serif;
       }
       .header {
           font: 15px sans-serif;
       }
       #firstGrid{
		   font: 13px sans-serif;
       }
       .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
        .node {
            font: 10px sans-serif;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
    </style>
    
</head>
<body class="claro">

	<div id="header" style="position: fixed;width: 100%;background-color: rgb(255,255,255);"></div>
	<div id="navigateGraph" style="position: fixed;width: 100%;top: 42px;background-color: rgb(255,255,255);"></div>
	<div id="bar1"></div>
	<div id="bar2"></div>
	<div id="grid" style="margin: 10px"></div>
	
	<script type="text/javascript">
		var header = d3.select("#header").append("div").attr("id","header").attr("class","header");
		header.html("<a href='../index.html'><img src='../images/home_icon.png'></a> รายงานบุคลากร แยกตามหน่วยงาน มหาวิทยาลัยราชภัฏรำไพพรรณี");
		
		var root = {"name":"บุคลากรแยกตามหน่วยงาน",
				"children":[{"name":"จำนวนบุคลากรแยกตามประเภท",
					"children":[{"name":"รายชื่อบุคลากร"}]
					}]
		};
		
		var width = 600;
		var height = 50;
		
		var cluster = d3.layout.cluster().size([height, width-160]);
		
		var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });
	
	
		//d3.select("body").append("div").attr("id","navigateGraph");
		var svg = d3.select("#navigateGraph").append("svg")
			.attr("width", width)
			.attr("height", height)
			.append("g")
			.attr("transform", "translate(60,0)");
		var nodes = cluster.nodes(root);
		var links = cluster.links(nodes);

		var link = svg.selectAll(".link")
			.data(links)
			.enter().append("path")
			.attr("class", "link")
			.attr("d", diagonal);
	
		var node = svg.selectAll(".node")
			.data(nodes)
			.enter().append("g")
			.attr("class", "node")
			.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
		
			node.append("circle")
			.attr("r", 4.5);
	
		node.append("text")
		.attr("dx",-20)
		//.attr("dx", function(d) { return d.children ? -8 : 8; })
		.attr("dy", -8)
		.style("text-anchor", "start")
		//.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
		.text(function(d) { return d.name; });
		d3.select(self.frameElement).style("height", height + "px");
		
		//Global variable
		var navi = d3.select("#navigateGraph").selectAll("g.node").selectAll("circle");
		var navi1,navi2,navi3;
		navi.forEach(function(d,i){
			if(i==0){
				navi1 = d[0];
			}else if(i==1){
				navi2 = d[0];
			}else{
				navi3 = d[0];
			}
		});
		
		navi1.style.fill = "rgb(176,196,222)";
		
		
		d3.json("../STF002ControllerA",function(error,data){
			d3.select("#bar1").append("div").attr("id","barGraph1");
			var svg = dimple.newSvg("#barGraph1", 700, 560);
			var myChart = new dimple.chart(svg, data);
			myChart.setBounds(60, 100, 510, 330)
			var x = myChart.addCategoryAxis("x", "departmentName");
			var y = myChart.addMeasureAxis("y", "amount");
			var mySeries = myChart.addSeries(null, dimple.plot.bar);
			
			mySeries.addEventHandler("click", onClick);
			
			mySeries.getTooltipText = function(e) {
                return [
                    "หน่วยงาน: " + e.x,
                    "จำนวน: " + e.y
                ];
            };
			
			x.title = "หน่วยงาน";
			y.title = "จำนวน";
			
			myChart.draw(600);
			x.shapes.selectAll("text").attr("transform", "rotate(45)");
			
			function onClick(e){
				var departmentCode;
				var departmentName;
				data.some(function(d,i){
					if(d.departmentName.localeCompare(e.xValue)==0){
						departmentCode = d.departmentCode;
						departmentName = d.departmentName;
					}
				});
				
				firstDrilldown(departmentCode,departmentName);
				//firstDrilldown1(depId);
				/* if(document.querySelector('input[name="radioType"]:checked').value === "barGraph"){
					firstDrilldown1(depId);
				}else{
					firstDrilldown2(depId);
				} */
			}
		});//end d3.json
		
		function firstDrilldown(departmentCode,departmentName){
			removeDiv("barGraph2");
			if(document.getElementById("firstGrid")!=null){
				document.getElementById('firstGrid').style.display = 'none';
				document.getElementById('headerGrid').style.display = 'none';
			}
			d3.json("../STF002ControllerA?departmentCode="+departmentCode,function(error,data){
				var header = d3.select("#bar2").append("div").attr("id","barGraph2").attr("class","header");
				header.append("p").attr("class","header").text("บุคลากร  "+departmentName);
				var svg = dimple.newSvg("#barGraph2", 700, 500);
				var myChart = new dimple.chart(svg, data);
				myChart.setBounds(100, 30, 510, 330)
				var x = myChart.addCategoryAxis("x", "staffTypeName");
				var y = myChart.addMeasureAxis("y", "amount");
				var mySeries = myChart.addSeries(null, dimple.plot.bar);
				
				mySeries.addEventHandler("click", onClick);
				
				mySeries.getTooltipText = function(e) {
	                return [
	                    "ประเภท: " + e.x,
	                    "จำนวน: " + e.y
	                ];
	            };
				
				x.title = "ประเภท";
				y.title = "จำนวน";
				
				myChart.draw(600);
				
				//fix bug dimple
				if(data.length>4){
					x.shapes.selectAll("text").attr("transform", "rotate(45)");
				}
				
				function onClick(e){
					var staffType;
					var staffTypeName;
					data.some(function(d,i){
						if(d.staffTypeName.localeCompare(e.xValue)==0){
							staffType = d.staffType;
							staffTypeName = d.staffTypeName;
						}
					}); 
					secondDrilldown(staffType,staffTypeName,departmentCode,departmentName)
				}
				goToAnchor("barGraph2");
				navi2.style.fill = "rgb(176,196,222)";
				navi3.style.fill = "rgb(255,255,255)";
			});//end d3.json
		}
		
		function secondDrilldown(staffType,staffTypeName,departmentCode,departmentName){
			d3.json("../STF002ControllerA?departmentCode="+departmentCode+"&staffType="+staffType,function(error,data){
				if(document.getElementById("firstGrid") == null){
					d3.select("#grid").append("div").attr("id","headerGrid").attr("class","header")
					d3.select("#grid").append("div").attr("id","divGrid");
				}
				document.getElementById("headerGrid").innerHTML = "รายชื่อ "+staffTypeName+" "+departmentName;
				if(document.getElementById("firstGrid")!=null){
					document.getElementById('firstGrid').style.display = 'block';
					document.getElementById('headerGrid').style.display = 'block';
				}
				require([
		 					"dojox/grid/DataGrid",
		 					"dojo/store/Memory",
		 					"dojo/data/ObjectStore",
		 					"dojo/request",
		 					"dijit/Dialog",
		 					"dojo/domReady!"
		 				], function(DataGrid, Memory, ObjectStore, request){
		      				var grid = dijit.byId('firstGrid');
		 					var	dataStore =  new ObjectStore({ objectStore:new Memory({ data: data}) });
		 					if(!grid){
			 					grid = new DataGrid({
		 							store: dataStore,
		 							id:"firstGrid",
		 							query: { id: "*" },
		 							structure: [
										 { name: "ชื่อ", field: "staffName", width: "150px" },
										 { name: "ตำแหน่ง", field: "positionName", width: "100px"},
										 { name: "หน่วยงาน", field: "departmentName",width:"100px"}
		 							],
		 							style:'width:410px; height:400px;margin:auto;'
		 						}, "divGrid");
		 					}
	 						grid.setStore(dataStore);
	 						grid.startup();
		 				});
				goToAnchor("firstGrid");
				navi3.style.fill = "rgb(176,196,222)";
			});
		}
		
		function removeDiv(divName){
        	if(document.getElementById(divName)!=null){
        		document.getElementById(divName).remove();
        	}
        }
		
		function goToAnchor(name) {
            document.getElementById(name).scrollIntoView(true);
        }
	</script>
</body>
</html>